<div class="mt-3">
  <div class="row">
    <div class="col-8">
      <form [formGroup]="basicForm" id="basicForm" class="needs-validation" novalidate autocomplete="off">
        <div class="form-group">
          <label>Active by default: <span class="required">*</span></label>
          <div class="custom-control custom-switch">
            <input type="checkbox" formControlName="active" class="custom-control-input" id="typeActiveInput"/>
            <label class="custom-control-label" for="typeActiveInput"></label>
          </div>
        </div>
        <div class="form-group">
          <label for="typeLabelInput">Label: <span class="required">*</span></label>
          <input type="text" formControlName="label" class="form-control"
                 [ngClass]="{ 'is-valid': label.valid && (label.dirty || label.touched),
                 'is-invalid': label.invalid && (label.dirty || label.touched)}"
                 id="typeLabelInput" aria-describedby="typeLabelInputHelp" required>
          <div *ngIf="label.invalid && (label.dirty || label.touched)"
               class="invalid-feedback">
            <div class="float-right" *ngIf="label.errors.required">
              Label is required.
            </div>
          </div>
          <small id="typeLabelInputHelp" class="form-text text-muted">only a display name</small>
          <div class="clearfix"></div>
        </div>
        <div class="form-group">
          <label for="typeNameInput">Name: <span class="required">*</span></label>
          <input type="text" formControlName="name" class="form-control"
                 [ngClass]="{ 'is-valid': name.valid && (name.dirty || name.touched),
                 'is-invalid': name.invalid && (name.dirty || name.touched) }"
                 id="typeNameInput" readonly lowercase required>
          <small id="typeNameInputHelp" class="form-text text-muted">Type name must be lowercase unique</small>
          <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="invalid-feedback">
            <div class="float-right" *ngIf="name.errors.required">
              Name is required.
            </div>
            <div class="float-right" *ngIf="name.errors.typeExists">
              A type with this name already exists.
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <cmdb-icon-picker [iconFormGroup]="basicMetaIconForm"
                          [fallbackIcon]="basicMetaIconForm.get('icon').value"></cmdb-icon-picker>
        <div class="clearfix"></div>
        <div class="form-group">
          <label for="typeDescriptionInput">Description:</label>
          <textarea class="form-control" formControlName="description" id="typeDescriptionInput" rows="3"
                    aria-describedby="typeDescriptionInputHelp"></textarea>
          <small id="typeDescriptionInputHelp" class="form-text text-muted">Small description of the type</small>
          <div class="clearfix"></div>
        </div>
      </form>
    </div>

    <div class="col-4">
      <div class="card mb-3" *ngIf="mode == modes.Create || mode == modes.Edit">
        <div class="card-header">
          Category:
          <div *ngIf="basicCategoryForm.get('category_id').value; then categorySelected else categoryUnselected"></div>
          <ng-template #categorySelected><span class="text-success">SELECTED</span></ng-template>
          <ng-template #categoryUnselected><span class="text-danger">UNSELECTED</span></ng-template>
        </div>
        <div class="card-body">
          <div *ngIf="categories">
            <form [formGroup]="basicCategoryForm">
              <ng-select
                [items]="categories"
                bindLabel="label"
                bindValue="public_id"
                placeholder="Select category"
                formControlName="category_id">
              </ng-select>
            </form>
          </div>
          <div class="mt-2">
            <button class="btn btn-primary btn-block" role="button" aria-pressed="true" (click)="addCategoryModal()">
              <fa-icon icon="plus"></fa-icon>
              Add new Category
            </button>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          Validation: <span [className]="basicForm.valid ? 'text-success' : 'text-danger'">{{basicForm.status}}</span>
        </div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            <li *ngFor="let validateFormValue of basicForm.value | keyvalue"
                class="list-group-item">{{validateFormValue.key}}: {{validateFormValue?.value}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
